// 使用 useState Hook 作用模拟类组件中 状态
import React from "react";
// 1. 引入 useState hook
import { useState } from "react";
const App = () => {
  // Hook 使用规则
  // https://zh-hans.reactjs.org/docs/hooks-rules.html
  // a.1 只在最顶层使用 Hook
  // a.2 不要在循环，条件或嵌套函数中调用 Hook，
  // 2. 使用useState hook
  let [num, setNum] = useState(666); // 666 初始化的值
  let [str,setStr] = useState("(*^_^*)");// 字符串
  let [bool,setBool] = useState(true);// 布尔值
  let [arr,setAttr] = useState([{
    id:1,
    text:"😀"
  },{
    id:2,
    text:"(*^_^*)"
  }])
  // let tt = 1;
  return (
    <div>
      <h1>{num}</h1>
      <h1>{str}</h1>
      <h1>{bool?"真":"假"}</h1>
      <ul>
        {
          arr.map(v=><li key={v.id}>{v.text}</li>)
        }
      </ul>
      <button onClick={()=>{
        // 3. 调用 setNum 函数 => 视图更新
        setNum(num+1);
      }}>加1</button>
    </div>
  );
};

export default App;
